<template>
  <div class="header-container">
    <div class="l-content">
      <el-button style="margin-right: 20px" @click="handleMenu" icon="el-icon-menu" size="mini"></el-button>

      <!--tag-->
      <el-tag
        size="medium"
        v-for="(tag,index) in tags"
        :key="tag.name"
        :effect="$route.name === tag.name? 'dark' : 'plain' "
        :closable="tag.name!=='main'"
        @click="toTag(tag)"
        :disable-transitions="false"
        @close="handleClose(tag,index)"
        type="info">
        {{ tag.name }}
      </el-tag>
    </div>
    <div class="r-content">
      <el-dropdown @command="handleClick">
                <span class="el-dropdown-link">
                    <img class="user" src="../assets/admin2.png" alt="">
                </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item command="cancel">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
// import Cookie from 'js-cookie'
export default {
  data() {
    return {}
  },
  methods: {
    handleMenu() {
      this.$store.commit('collapseMenu')
    },
    handleClick(command) {
      if (command === 'cancel') {

        this.axios({
          method: "post",
          url: "/logout",
        }).then(resp => {
          if (resp) {
            if (resp.data.code == 200) {
              console.log('退出登录')

              // this.$store.commit("REMOVE_INFO")
              // 跳转到登录页
              this.$router.push('/login')
            }
          }
        })

      }
    },

    handleClose(tag, index) {
      // this.tags.splice(this.tags.indexOf(tag), 1);
      var length = this.tags.length - 1
      this.$store.commit('closeTags', tag)


      //删除tag切换路由
      if (tag.name !== this.$route.name) {
        return
      }
      //删除的最右侧高亮tag 则跳转路由到上一个
      if (index === length) {
        this.$router.push({
          name: this.tags[index - 1].name
        })
      } else {
        //非最后一个
        this.$router.push({
          name: this.tags[index].name
        })
      }

    },

    toTag(tag) {
      if (this.$route.path !== tag.path) {
        // console.log(tag.path)
        this.$router.push(tag.path)
      }
    }

  },
  computed: {
    tags: "",
    ...mapState({
      tags: state => state.tagList
    })
  },

  mounted() {
    // console.log(this.tags)
  }


}
</script>
<style lang="less" scoped>


.header-container {
  padding: 0 20px;
  background-color: #333;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;


  .el-tag {
    margin-right: 10px;
  }

  .text {
    color: #fff;
    font-size: 14px;
    margin-left: 10px;
  }

  .r-content {
    .user {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }

  .l-content {
    display: flex;
    align-items: center;

    /deep/ .el-breadcrumb__item {
      .el-breadcrumb__inner {
        font-weight: normal;

        &.is-link {
          color: #666
        }
      }

      &:last-child {
        .el-breadcrumb__inner {
          color: #fff
        }
      }
    }
  }
}
</style>
